<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>
<body>
<!--    <h1> 你终于找到我了[[#{name}]]</h1>-->


    <!-- 传统方法, 提交时必须刷新整个页面, 加载较慢 -->
 <!--   <form th:action="@{/brand/doFindBrands}">
        <input type="text" name="name" />
        <input type="button" onclick="doSearch()" value="Search"/>
    </form>-->


    <!-- 异步操作时,使用下面的js方式提交参数,  可以完成部分信息的更新-->

    <div class="container">
        <h1>The bootstrap Page</h1>
<!--
        <form>
            <input type="text" name="name" />
            <input type="button" onclick="doSearch()" value="Search"/>
        </form>
-->

        <form class="form-inline">
            <div class="form-group">
                <label class="sr-only" for="exampleInputName">商品名称</label>
                <input type="text" class="form-control" id="exampleInputName" placeholder="name" name="name">
            </div>
            <button type="button" class="btn btn-default" onclick="doSearch()">查找</button>
            <button type="button" class="btn btn-default" onclick="doAddUI()">添加条目</button>
        </form>


        <table class="table">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>CreatedTime</th>
                <th colspan="3">Operation</th><!--一行跨两列-->
            </tr>
            </thead>
            <tbody>
            <!-- th 为 thymeleaf 自定义的标签属性-->
            <!-- th:each 是 thymeleaf中定义的用于迭代集合的一个循环标签-->
            <tr th:each="brand: ${list}"><!--list 为在Controller中向model 中的变量, brand 为List中的变量-->
                <!-- th:text 是呈现文本时的一种标签属性-->
                <td th:text="${brand.id}">10</td>   <!--当${brand.id}取到值以后, 会代替后面的10 -->
                <td th:text="${brand.name}">----</td><!--.name 获取数据的原理, 是去调用对应的get方法, 如果没有get方法, 则会报错-->
                <td th:text="${#dates.format(brand.createdTime, 'yyyy/MM/dd HH:mm')}">----</td>
                <!--日期格式化写法: 参考官方文档19章的写法-->
                <td>
                    <!-- 右侧href 不能被解析时, 调用左侧的href   向参数中传值时, 需要按照下面的格式-->
                    <!--<a href="" th:href="@{/brand/doDeleteBrandById/{id}(id=${brand.id})}">delete</a>-->
                    <input type="button" class="btn btn-danger" value="delete" onclick="deleteBrandById(100)"
                           th:onclick="deleteBrandById([[${brand.id}]])">
                    <!-- 具体传入值的方法: 看官方文档 -->
                </td>
                <td>
                    <input type="button" class="btn btn-warning" value="update"
                           th:onclick="updateBrand([[${brand.id}]], [[${brand.name}]],[[${brand.remark}]])">
                </td>
                <td>
                    <input type="button" class="btn btn-warning" value="update2"
                           th:onclick="doFindBrandById([[${brand.id}]])" />
<!--      onclick="doFindBrandById(1)"              -->
                </td>

            </tr>
            </tbody>
        </table>
    </div>


    <script type="text/javascript">

        function doSearch() {
           // alert("lll");
        //    var 全局变量,  let 局部变量
        //     console.log("进来了");
            let name = document.forms[0].name.value;
            // console.log(name);
            // `` 引用的为模版字符串, 用来拼接字符串,参数为上面出现的变量
            let url = `http://localhost/brand/doFindBrands/${name}` ;
            // let url = "http://localhost/brand/doFindBrands/" + name;
            //访问对应的url (之后会改为异步形式)
            location.href = url;
        }

        function deleteBrandById(id) {
            // alert("进来了吗 " + id);
            let r = confirm("是否删除这条数据?")    //confirm 为浏览器中window对象的函数
            if(r == true){
                let url = `http://localhost/brand/doDeleteBrandById/${id}`;
                location.href = url;
            }
        }

        function doAddUI() {
            location.href="/brand/doAddUI"
        }

        function updateBrand(id,name,remark) {
            // alert("jinlaimei");
            // alert(id + name +remark);
            location.href=`/brand/doUpdateUI/${id}/${name}/${remark}`;
        }

        function doFindBrandById(id) {
            console.log(111);
            alert(id);
            location.href=`/brand/doFindBrandById/${id}`;
        }

    </script>
</body>
</html>